<template>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            offset="500"
        >
            <div class="list-main">
                <van-row gutter="10">
                    <van-col span="12" v-for="item in GoodsData" :key="item.id" @click="toGoodsInfo(item)">
                        <div class="goods-info-box">
                            <img :src="item.pict_url" class="goods-cover" alt="">
                            <p class="goods-title"> {{item.title}} </p>
                            <div class="bot-box">
                                <div class="con-l">
                                    <span class="text old-price">原价</span>
                                    <span class="price text old-price">¥{{item.reserve_price}}</span>
                                </div>
                                <div class="con-c">
                                    <span class="text">卷后价</span>
                                    <span class="price">¥{{item.zk_final_price}}</span>
                                </div>
                                <div class="con-r">
                                    <span class="text">已售</span>
                                    <span class="text">{{item.volume}}</span>
                                </div>
                            </div>
                        </div>
                    </van-col>
                </van-row>
            </div>
        </van-list>
    </van-pull-refresh>
</template>

<script>
    import { getGoodsList } from '@/api/goods';
    export default {
        name: "like",
        props: ['likeItemId'],
        data() {
            return {
                active: 0,
                GoodsData: [],
                loading: false,
                finished: false,
                refreshing: false,
                query: {
                    page: 1,
                    limit: 18,
                    item_id: this.likeItemId,
                    material_id: 13256//形似推荐物料ID @link https://market.m.taobao.com/app/qn/toutiao-new/index-pc.html#/detail/10628875?_k=gpov9a
                }
            };
        },
        methods: {
            onLoad() {
                getGoodsList(this.query).then(res => {
                    if (this.refreshing) {
                        this.GoodsData = [];
                        this.refreshing = false;
                    }
                    if (res.length < 1) {
                        this.finished = true
                    }
                    for(let i=0; i<res.length; i++) {
                        this.GoodsData.push(res[i]);
                    }
                    this.loading = false;
                    this.page++;
                })
            },

            /**
             * 商品详情页
             * @param itemId 商品ID
             * @param couponShareUrl 链接-宝贝+券二合一页面链接
             * @param clickUrl 宝贝链接
             * @param url 宝贝链接
             */
            toGoodsInfo(goodsInfo){
                let goodsData = {
                    web: 'info',
                    title: goodsInfo.title,
                    reserve_price: goodsInfo.reserve_price,
                    zk_final_price: goodsInfo.zk_final_price,
                    coupon_amount: goodsInfo.coupon_amount,
                    volume: goodsInfo.volume,
                    coupon_start_time: goodsInfo.coupon_start_time,
                    coupon_end_time: goodsInfo.coupon_end_time,
                    item_id: goodsInfo.item_id,
                    click_url: goodsInfo.click_url,
                    item_url: goodsInfo.item_url,
                    coupon_share_url: goodsInfo.coupon_share_url,
                    pict_url: goodsInfo.pict_url,
                    url: goodsInfo.url
                };
                if(typeof goodsInfo.small_images == 'undefined'){
                    goodsData.small_images = [goodsInfo.pict_url, goodsInfo.pict_url];
                }else{
                    if(typeof goodsInfo.small_images.string == 'string'){
                        goodsData.small_images = [goodsInfo.small_images.string, goodsInfo.small_images.string];
                    }else{
                        goodsData.small_images = goodsInfo.small_images.string;
                    }
                }
                //向上滚动效果
                var timer = setInterval(function(){
                    let osTop = document.documentElement.scrollTop || document.body.scrollTop;
                    let ispeed = Math.floor(-osTop / 3);
                    document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
                    if(osTop === 0){
                        clearInterval(timer);
                    }
                },30)
                this.$emit('goodsInfo', goodsData);
            },
            //下拉加载
            onRefresh() {
                // 清空列表数据
                this.finished = false;
                // 重新加载数据
                // 将 loading 设置为 true，表示处于加载状态
                this.loading = true;
                this.query.page = 1;
                this.onLoad();
            }
        }
    }
</script>

<style scoped>
    .list-main{
        padding:10px;
        box-sizing: border-box;
        background: white;
    }
    .goods-info-box{
        background: white;
        padding:10px;
        margin-bottom: 10px;
        border-radius: 5px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07),
        0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07),
        0 16px 32px rgba(0, 0, 0, 0.07), 0 32px 64px rgba(0, 0, 0, 0.07);
        transition: all 0.5s;
        box-sizing: border-box;
    }
    .goods-cover{
        height:140px;
        width: 100%;
        border-radius: 2px;
    }
    .goods-title{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        line-height:16px;
        font-size: 14px;
        padding:2px 3px;
    }
    .share-box img{
        width: 22px;
        height: 22px;
    }
    .bot-box{
        display: flex;
        flex-direction:row;
        justify-content: space-between;
        font-size: 13px;
    }
    .bot-box > div{
        display: flex;
        flex-direction:column;
        justify-content: space-between;
        padding:3px;
        line-height: 16px;
        color:#999999;
    }
    .bot-box .price{
        color: red;
    }
    .bot-box .old-price{
        text-decoration:line-through;
    }
</style>